<template>
  <div v-drag class="info-card">
    <el-card style="max-width: 900px; min-height: 350px">
      <template #header>
        <div class="card-header">
          <span>路况信息</span>
          <span class="close" @mousedown.stop @click.prevent="close">x</span>
        </div>
      </template>
      <div class="table">
        <table border="1" cellspacing="0">
          <thead>
            <tr>
              <th>用户名</th>
              <th>事件类型</th>
              <th>事件地址</th>
              <th>附近建筑</th>
              <th>发生时间</th>
              <th>事件描述</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in data" :key="index">
              <td>{{ item.username }}</td>
              <td>{{ item.type }}</td>
              <td>{{ item.address }}</td>
              <td>{{ item.building }}</td>
              <td>{{ item.time }}</td>
              <td>{{ item.desc }}</td>
              <td>
                <span class="operate" v-if="item.status === '待审核'">
                  <button class="pass" @mousedown.stop @click.prevent="passInfo(index)">通过</button>
                  <button class="ignore" @mousedown.stop @click.prevent="ignoreInfo(index)">忽略</button>
                </span>
                <span class="operate" v-else-if="item.status === '已通过'">已通过</span>
                <span class="operate" v-else-if="item.status === '已忽略'">已忽略</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-card>
  </div>
</template>

<script setup>
const data = JSON.parse(localStorage.getItem('infoLists'));
//localStorage.removeItem('infoLists')
const close = () => {
  document.querySelector('.info-card').style.display = 'none';
};
const passInfo = index => {
  data[index].status = '已通过';
  localStorage.setItem('infoLists', JSON.stringify(data));
};
const ignoreInfo = index => {
  data[index].status = '已忽略';
  localStorage.setItem('infoLists', JSON.stringify(data));
};
</script>

<style lang="scss" scoped>
.info-card {
  position: absolute;
  top: 10%;
  left: 20%;
  width: 900px;
  z-index: 99;
  .card-header {
    span {
      font-size: 1.5em;
      color: #777;
      font-weight: 600;
    }
    .close {
      position: absolute;
      right: 50px;
      font-size: 16px;
      color: #bbb;
      cursor: pointer;
      padding: 5px;
    }
  }
  .table {
    width: 100%;
    table {
      width: 100%;
      border-collapse: collapse;
      border: 1px solid #ccc;
      thead {
        background-color: #eee;
      }
      th,
      td {
        padding: 5px;
        text-align: center;
      }
      button {
        padding: 5px 10px;
        color: white;
        border: none;
        margin-left: 10px;
        border-radius: 2px;
        cursor: pointer;
      }
      .pass {
        background-color: rgb(141, 191, 141);
      }
      .ignore {
        background-color: rgb(205, 172, 111);
      }
    }
  }
}
:deep(.el-card__header) {
  padding: 10px 20px;
}
:deep(.el-card__footer) {
  padding: 10px 20px;
}
</style>
